<template>
<div>
<!--  通讯录显示  -->
<!--  <el-page-header @back="goBack" title="行政" :content="headerContent" ></el-page-header>-->

<!--  分割线  -->
<!--  <el-divider></el-divider>-->

  <el-tabs  v-model="activeName" @tab-click="handleClick" >
    <el-tab-pane label="律所通讯录" name="admaddresslist">


        <!--    高级查询-->
        <el-row>
          <el-form :inline="true" :model="admAddresslistForm" >

            <el-col :span="2.5">
              <el-form-item>
                <el-input v-model="admAddresslistForm.selAddresslistPlusData" placeholder="用户名/姓名/手机号码"></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="2">
              <el-form-item>
                <el-button type="primary" plain @click="queryAdmAddresslist" icon="el-icon-search">检索</el-button>
              </el-form-item>
            </el-col>

          </el-form>

        </el-row>

        <el-table
            :data="admAddresslistData"
            style="width: 100%">
          <el-table-column
              prop="addresslistUser"
              label="用户名"
              width="180">
          </el-table-column>
          <el-table-column
              prop="addresslistName"
              label="姓名"
              width="180">
          </el-table-column>
          <el-table-column
              prop="addresslistCellphonenumber"
              label="手机号码">
          </el-table-column>
          <el-table-column
              prop="addresslistTelephone"
              label="固定电话">
          </el-table-column>
          <el-table-column
              prop="addresslistFax"
              label="传真">
          </el-table-column>
          <el-table-column
              prop="addresslistState"
              label="状态">
          </el-table-column>

          <el-table-column
              fixed="right"
              label="操作"
              width="120">
            <template slot-scope="scope">
              <el-button type="text" @click="ChaKan(scope.row.id)"  size="small">查看</el-button>
            </template>
          </el-table-column>






      </el-table>


    </el-tab-pane>
    <el-tab-pane label="外部联系人"  name="admContacts">

<AdmContacts></AdmContacts>

    </el-tab-pane>

  </el-tabs>





</div>
</template>

<script>

//引入联系人组件
import AdmContacts from "./AdmContacts";

export default {
  name: "AdmAddresslist",
  components:{AdmContacts},//注册组件
  data(){
    return{
      headerContent:"通讯录",//页头显示
      activeName:"admaddresslist",
      admAddresslistData:[],
      admAddresslistForm:{
        selAddresslistPlusData:""
      }
    }
  },
  created() {
this.queryAdmAddresslist()

  },
  methods:{
    goBack(){this.$router.go(-1);}, //返回上一个页面
    queryAdmAddresslist(){
      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.$http.get("admAddresslist",{params:{"selPlusData":this.admAddresslistForm.selAddresslistPlusData}})
      .then(res => {
        setTimeout(() => {
          loading.close();
        });
        this.admAddresslistData=res.data.data
      })
      .catch()

    },
    ChaKan(id){// 查看详情
      this.$router.push({name:"queryadmaddresslistbyid" ,params:{id:id}})
    },
    handleClick(tab){

      if(tab.name == "admContacts"){
        this.headerContent="联系人"
      }else if(tab.name == "admaddresslist"){
        this.headerContent="通讯录"
      }

    }

  }
}
</script>

<style scoped>
  .el-divider{
    margin-top: 10px ;
    margin-bottom: 15px ;
    height: 2px;
  }
</style>